昨天透過方法二 (安裝Node.js、npm) 創建一個新的Vue專案後，並在VS Code打開此檔案就會看到Vue的專案結構，今天我們就來一探究竟這些檔案的架構吧～

專案結構解析

針對存放專案主要程式碼的src資料夾下的檔案再做更詳細的介紹～

src

• assets 存放靜態資源(e.g.圖片、CSS等)
• components 存放Vue元件的地方
• App.vue 是Vue 的根元件，包含邏輯(script)、畫面(tmplate)、樣式(style)
• main.js 專案入口檔案，負責把 App.vue 掛載到 index.html 裡

接下來要介紹在開始學習Vue的語法之前，需要知道的相關基礎概念，可以幫助我們更加了解Vue的功能與應用～

Vue程式碼的組織— SFC

單一檔案元件（Single File Component，SFC）是 Vue.js 框架的核心檔案格式，副檔名為 .vue，透過 <script>、 <template>、<style> 將元件的邏輯 (JavaScript) 、視圖 (HTML) 與 樣式 (CSS) 封裝在同一個檔案中，以便於維護、模組化與重複使用。

Vue常用的應用— SPA

單頁應用程式（Single Page Application，SPA）是指整個網站只有一個 HTML 頁面，Vue 透過 JavaScript 動態更新 DOM 與前端路由導航，讓使用者感覺像在切換不同頁面，但實際上始終停留在同一個 HTML 中，可以提供更流暢的互動體驗。

Vue 專案的一種部署策略

靜態站點生成（Static Site Generation, SSG）是指在建置階段就把應用程式預先渲染成 HTML，並直接部署成靜態檔案，可以大幅提升網站效能，並減少伺服器負擔，常見的工具有 VitePress、Nuxt.js。

參考資源

https://vuejs.org/guide
https://www.runoob.com/vue3
https://www.youtube.com/watch?v=07fMN5nL-FA&list=PLSCgthA1AnifSzKdpV4FWq1pLVF4FbZ4K&index=3